<template>
	<view class="tax-detail-page">
		<!-- 顶部导航栏 -->
		<view class="top-nav">
			<view class="nav-left" @click="navigateBack">
				<i class="fa fa-arrow-left"></i>
			</view>
			<view class="nav-title">报税详情</view>
			<view class="nav-right" @click="showActionMenu">
				<i class="fa fa-ellipsis-v"></i>
			</view>
		</view>

		<!-- 公司基本信息 -->
		<view class="company-info-card">
			<view class="card-header">
				<view class="company-name">
					<text>{{ company.companyName }}</text>
					<view class="company-tags">
						<text class="tag" v-if="company.isKp">票</text>
						<text class="tag" v-if="company.isZjd">介</text>
					</view>
				</view>
				<view class="status-badge" :class="[getStatusClass(company.declareState)]">
					<text>{{ getStatusText(company.declareState) }}</text>
				</view>
			</view>

			<view class="info-grid">
				<view class="info-item">
					<text class="label">区域：</text>
					<text class="value">{{ company.area }}</text>
				</view>
				<view class="info-item">
					<text class="label">企业类型：</text>
					<text class="value">{{ company.taxType }}</text>
				</view>
				<view class="info-item">
					<text class="label">执照类型：</text>
					<text class="value">{{ company.scale }}</text>
				</view>
				<view class="info-item">
					<text class="label">税款：</text>
					<text class="value">{{ company.taxAmount }}</text>
				</view>
				<view class="info-item">
					<text class="label">扣款状态：</text>
					<text class="value">{{ company.isPay ? '已扣款' : '未扣款' }}</text>
				</view>
				<view class="info-item">
					<text class="label">检查状态：</text>
					<text class="value">{{ getCheckStatusText(company.checkStatus) }}</text>
				</view>
			</view>
		</view>

		<!-- 报税信息 -->
		<view class="tax-info-card">
			<view class="card-header">
				<text class="title">报税信息</text>
			</view>

			<view class="tax-info-content">
				<view class="info-row">
					<text class="label">申报日期：</text>
					<text class="value">{{ company.declareTime || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="label">申报税种：</text>
					<text class="value">{{ getCurrentTaxTypeName() }}</text>
				</view>
				<view class="info-row">
					<text class="label">申报备注：</text>
					<text class="value">{{ company.declareRemark || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="label">申报图片：</text>
					<view class="value images">
						<view class="image-item" v-for="(image, index) in company.declareImages" :key="index"
							@click="previewImage(image)">
							<image :src="image" mode="aspectFill"></image>
						</view>
						<view class="no-image" v-if="company.declareImages.length === 0">
							<text>暂无图片</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 税费种详情 -->
		<view class="tax-details-card">
			<view class="card-header">
				<text class="title">税费种详情</text>
			</view>

			<view class="tax-details-list">
				<view class="detail-item" v-for="(detail, index) in company.taxDetails" :key="index"
					@click="toggleDetailExpand(index)">
					<view class="detail-header">
						<view class="detail-info">
							<text class="name">{{ detail.name }}</text>
							<text class="amount">￥{{ detail.amount }}</text>
						</view>
						<view class="detail-status" :class="[getStatusClass(detail.status)]">
							<text>{{ getStatusText(detail.status) }}</text>
						</view>
						<view class="expand-icon" :class="{ 'expanded': detail.expanded }">
							<i class="fa fa-chevron-down"></i>
						</view>
					</view>

					<view class="detail-content" v-if="detail.expanded">
						<view class="content-row">
							<text class="label">申报时间：</text>
							<text class="value">{{ detail.declareTime || '-' }}</text>
						</view>
						<view class="content-row">
							<text class="label">申报状态：</text>
							<text class="value">{{ getStatusText(detail.status) }}</text>
						</view>
						<view class="content-row">
							<text class="label">申报凭证：</text>
							<view class="value">
								<view class="action-btn" @click.stop="downloadVoucher(detail)">
									<i class="fa fa-download"></i>
									<text>下载凭证</text>
								</view>
								<view class="action-btn" @click.stop="uploadVoucher(detail)">
									<i class="fa fa-upload"></i>
									<text>上传凭证</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 申报历史 -->
		<view class="declare-history-card">
			<view class="card-header">
				<text class="title">申报历史</text>
			</view>

			<view class="history-timeline">
				<view class="timeline-item" v-for="(history, index) in company.declareHistory" :key="index">
					<view class="timeline-dot" :class="[getHistoryDotClass(history.status)]"></view>
					<view class="timeline-line" v-if="index < company.declareHistory.length - 1"></view>
					<view class="timeline-content">
						<view class="content-header">
							<text class="time">{{ history.time }}</text>
							<text class="status"
								:class="[getHistoryTextClass(history.status)]">{{ history.status }}</text>
						</view>
						<view class="content-body">
							<view class="info-row">
								<text class="label">操作人：</text>
								<text class="value">{{ history.operator }}</text>
							</view>
							<view class="info-row">
								<text class="label">备注：</text>
								<text class="value">{{ history.remark }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-action-bar">
			<view class="btn action-btn" @click="handleDeclare">
				<text>申报</text>
			</view>
			<view class="btn action-btn" @click="handleCheck">
				<text>检查</text>
			</view>
			<view class="btn action-btn" @click="handleCancel" v-if="canCancel()">
				<text>取消申报</text>
			</view>
		</view>

		<!-- 申报弹窗 -->
		<u-modal v-model="declareModalShow" title="申报信息" :show-confirm-button="false" :border-radius="16">
			<view class="declare-form">
				<view class="form-group">
					<text class="form-label">申报图片：</text>
					<u-upload :action="uploadUrl" :auto-upload="false" @on-change="handleFileChange" ref="upload"
						multiple></u-upload>
				</view>
				<view class="form-group">
					<text class="form-label">备注：</text>
					<textarea v-model="declareRemark" placeholder="请输入备注信息" class="remark-input"></textarea>
				</view>
			</view>
			<view class="modal-footer">
				<view class="btn cancel-btn" @click="declareModalShow = false">
					<text>取消</text>
				</view>
				<view class="btn fail-btn" @click="handleDeclareFail">
					<text>申报失败</text>
				</view>
				<view class="btn success-btn" @click="handleDeclareSuccess">
					<text>确认申报</text>
				</view>
			</view>
		</u-modal>

		<!-- 检查弹窗 -->
		<u-modal v-model="checkModalShow" title="检查结果" :show-confirm-button="false" :border-radius="16">
			<view class="check-form">
				<view class="form-group">
					<text class="form-label">检查结果：</text>
					<u-radio-group v-model="checkResult" @change="handleCheckResultChange">
						<u-radio :label="1">检查通过</u-radio>
						<u-radio :label="2">检查失败</u-radio>
					</u-radio-group>
				</view>
				<view class="form-group" v-if="checkResult === 2">
					<text class="form-label">失败原因：</text>
					<textarea v-model="checkRemark" placeholder="请输入失败原因" class="remark-input"></textarea>
				</view>
			</view>
			<view class="modal-footer">
				<view class="btn cancel-btn" @click="checkModalShow = false">
					<text>取消</text>
				</view>
				<view class="btn confirm-btn" @click="handleCheckConfirm">
					<text>确认</text>
				</view>
			</view>
		</u-modal>

		<!-- 上传凭证弹窗 -->
		<u-modal v-model="uploadModalShow" title="上传凭证" :show-confirm-button="false" :border-radius="16">
			<view class="upload-form">
				<view class="form-group">
					<text class="form-label">税种：</text>
					<text class="form-value">{{ currentTaxDetail.name }}</text>
				</view>
				<view class="form-group">
					<text class="form-label">上传凭证：</text>
					<u-upload :action="uploadUrl" :auto-upload="false" @on-change="handleVoucherFileChange"
						ref="voucherUpload"></u-upload>
				</view>
			</view>
			<view class="modal-footer">
				<view class="btn cancel-btn" @click="uploadModalShow = false">
					<text>取消</text>
				</view>
				<view class="btn confirm-btn" @click="handleVoucherUpload">
					<text>确认上传</text>
				</view>
			</view>
		</u-modal>

		<!-- 操作菜单 -->
		<u-action-sheet v-model="actionSheetShow" :list="actionSheetList"
			@click="handleActionSheetClick"></u-action-sheet>

		<!-- 图片预览 -->
		<u-image-preview v-model="imagePreviewShow" :urls="previewImages"
			:current="currentPreviewIndex"></u-image-preview>

		<!-- 加载中提示 -->
		<u-loading-page v-if="loading"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 公司详情数据
				company: {
					id: '',
					companyName: '',
					area: '',
					taxType: '',
					scale: '',
					declareState: 0,
					taxAmount: '',
					isPay: 0,
					checkStatus: 0,
					isKp: false,
					isZjd: false,
					declareTime: '',
					declareRemark: '',
					declareImages: [],
					taxDetails: [],
					declareHistory: []
				},

				// 当前选中的税种
				selectedTaxType: 0,

				// 税种数据
				taxTypes: [{
						id: 0,
						name: '电税'
					},
					{
						id: 1,
						name: '个税'
					},
					{
						id: 2,
						name: '社保'
					},
					{
						id: 3,
						name: '生产经营'
					},
					{
						id: 4,
						name: '工商年审'
					},
					{
						id: 5,
						name: '税务年审'
					},
					{
						id: 6,
						name: '残疾人就业保障金'
					}
				],

				// 弹窗相关
				declareModalShow: false,
				checkModalShow: false,
				uploadModalShow: false,
				actionSheetShow: false,
				imagePreviewShow: false,

				// 申报相关
				declareRemark: '',
				uploadFiles: [],
				uploadUrl: 'https://example.com/upload',

				// 检查相关
				checkResult: 1,
				checkRemark: '',

				// 凭证上传相关
				currentTaxDetail: null,
				voucherFiles: [],

				// 图片预览相关
				previewImages: [],
				currentPreviewIndex: 0,

				// 操作菜单
				actionSheetList: [{
						name: '设置',
						icon: 'setting'
					},
					{
						name: '移至公海',
						icon: 'ship'
					},
					{
						name: '自然人',
						icon: 'user'
					},
					{
						name: '套账',
						icon: 'book'
					},
					{
						name: '电局',
						icon: 'electronics'
					}
				],

				// 加载状态
				loading: false
			};
		},

		onLoad(options) {
			// 获取公司ID
			const companyId = options.id;

			// 获取税种类型
			if (options.taxType) {
				this.selectedTaxType = parseInt(options.taxType);
			}

			// 检查模式
			if (options.check === 'true') {
				setTimeout(() => {
					this.checkModalShow = true;
				}, 500);
			}

			// 加载公司详情
			this.loadCompanyDetail(companyId);
		},

		methods: {
			// 加载公司详情
			loadCompanyDetail(companyId) {
				this.loading = true;

				// 模拟API请求获取公司详情
				setTimeout(() => {
					this.company = this.generateMockCompanyDetail(companyId);
					this.loading = false;
				}, 1000);
			},

			// 生成模拟公司详情数据
			generateMockCompanyDetail(companyId) {
				const companyNames = [
					'科技创新有限公司', '未来发展有限公司', '智慧教育科技有限公司',
					'健康医疗科技有限公司', '绿色金融服务有限公司', '绿色物流有限公司',
					'绿色能源有限公司', '数字媒体有限公司', '国际贸易有限公司',
					'文化创意有限公司', '智能制造有限公司', '互联网科技有限公司',
					'农业科技有限公司', '旅游开发有限公司', '房地产开发有限公司'
				];

				const areas = ['北京', '上海', '广州', '深圳', '杭州', '南京'];
				const taxTypes = ['小规模纳税人', '一般纳税人'];
				const scales = ['个人独资企业', '个体户', '公司', '合作企业', '合作社', '其他企业'];

				// 随机选择一个公司名称
				const randomIndex = parseInt(companyId) % companyNames.length;
				const companyName = companyNames[randomIndex] + (companyId > companyNames.length ? companyId : '');

				// 随机状态
				const declareState = Math.floor(Math.random() * 6); // 0-5的随机状态

				return {
					id: companyId,
					companyName: companyName,
					area: areas[Math.floor(Math.random() * areas.length)],
					taxType: taxTypes[Math.floor(Math.random() * taxTypes.length)],
					scale: scales[Math.floor(Math.random() * scales.length)],
					declareState: declareState,
					taxAmount: (Math.random() * 10000).toFixed(2),
					isPay: Math.floor(Math.random() * 2), // 0:未扣款, 1:已扣款
					checkStatus: Math.floor(Math.random() * 3), // 0:未检查, 1:检查通过, 2:检查失败
					isKp: Math.random() > 0.7, // 是否开票
					isZjd: Math.random() > 0.8, // 是否中介单
					declareTime: declareState === 0 ? this.getRandomDate(true) : '',
					declareRemark: declareState === 0 ? '正常申报' : '',
					declareImages: declareState === 0 ? this.generateRandomImages(2) : [],
					taxDetails: this.generateTaxDetails(),
					declareHistory: this.generateDeclareHistory()
				};
			},

			// 生成税费种详情
			generateTaxDetails() {
				const details = [];
				const taxNames = ['增值税', '消费税', '企业所得税', '印花税', '通用申报表'];

				for (let i = 0; i < taxNames.length; i++) {
					const status = Math.floor(Math.random() * 4); // 0:已申报, 1:未申报, 2:申报失败, 3:无需申报
					const isNeedReport = status !== 3;

					details.push({
						name: taxNames[i],
						amount: (Math.random() * 1000).toFixed(2),
						status: status,
						declareTime: status === 0 ? this.getRandomDate(true) : '',
						expanded: false,
						isNeedReport: isNeedReport
					});
				}

				return details;
			},

			// 生成申报历史
			generateDeclareHistory() {
				const history = [];
				const operators = ['张三', '李四', '王五', '赵六'];
				const statuses = ['已申报', '申报失败', '取消申报', '检查通过', '检查失败'];
				const remarks = ['正常申报', '数据异常', '重复申报', '已扣款', '未扣款'];

				for (let i = 0; i < 5; i++) {
					history.push({
						time: this.getRandomDate(true, i * 7),
						operator: operators[Math.floor(Math.random() * operators.length)],
						status: statuses[Math.floor(Math.random() * statuses.length)],
						remark: remarks[Math.floor(Math.random() * remarks.length)]
					});
				}

				// 按时间排序，最近的在前
				history.sort((a, b) => new Date(b.time) - new Date(a.time));

				return history;
			},

			// 获取随机日期
			getRandomDate(isPast = false, daysOffset = 0) {
				const date = new Date();
				if (isPast) {
					// 过去的日期
					const days = Math.floor(Math.random() * 30) + daysOffset;
					date.setDate(date.getDate() - days);
				} else {
					// 未来的日期
					const days = Math.floor(Math.random() * 30);
					date.setDate(date.getDate() + days);
				}

				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 生成随机图片
			generateRandomImages(count) {
				const images = [];
				for (let i = 0; i < count; i++) {
					// 使用随机图片服务
					images.push(`https://picsum.photos/400/300?random=${Math.floor(Math.random() * 1000)}`);
				}
				return images;
			},

			// 导航返回
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 获取状态对应的样式类
			getStatusClass(status) {
				switch (status) {
					case 0:
						return 'status-success bg-green-100 text-green-700';
					case 1:
						return 'status-info bg-blue-100 text-blue-700';
					case 2:
						return 'status-warning bg-yellow-100 text-yellow-700';
					case 3:
						return 'status-danger bg-red-100 text-red-700';
					case 4:
						return 'status-gray bg-gray-100 text-gray-700';
					case 5:
						return 'status-partial bg-purple-100 text-purple-700';
					default:
						return '';
				}
			},

			// 获取状态对应的图标
			getStatusIcon(status) {
				switch (status) {
					case 0:
						return 'checkmark-circle-fill';
					case 1:
						return 'info-circle';
					case 2:
						return 'clock';
					case 3:
						return 'error-circle-fill';
					case 4:
						return 'minus-circle';
					case 5:
						return 'partial';
					default:
						return '';
				}
			},

			// 获取状态对应的文本
			getStatusText(status) {
				switch (status) {
					case 0:
						return '已申报';
					case 1:
						return '未申报';
					case 2:
						return '待申报';
					case 3:
						return '申报失败';
					case 4:
						return '无需申报';
					case 5:
						return '部分申报';
					default:
						return '';
				}
			},

			// 获取检查状态文本
			getCheckStatusText(status) {
				switch (status) {
					case 0:
						return '未检查';
					case 1:
						return '检查通过';
					case 2:
						return '检查失败';
					default:
						return '';
				}
			},

			// 获取当前税种名称
			getCurrentTaxTypeName() {
				const taxType = this.taxTypes.find(type => type.id === this.selectedTaxType);
				return taxType ? taxType.name : '';
			},

			// 切换税费种详情展开/收起
			toggleDetailExpand(index) {
				this.company.taxDetails[index].expanded = !this.company.taxDetails[index].expanded;
			},

			// 预览图片
			previewImage(image) {
				this.previewImages = this.company.declareImages;
				this.currentPreviewIndex = this.company.declareImages.indexOf(image);
				this.imagePreviewShow = true;
			},

			// 下载凭证
			downloadVoucher(detail) {
				uni.showToast({
					title: '凭证下载中...',
					icon: 'none',
					duration: 2000
				});

				// 模拟下载
				setTimeout(() => {
					uni.showToast({
						title: '凭证已下载',
						icon: 'success',
						duration: 2000
					});
				}, 1000);
			},

			// 上传凭证
			uploadVoucher(detail) {
				this.currentTaxDetail = detail;
				this.voucherFiles = [];
				this.uploadModalShow = true;
			},

			// 处理凭证文件变化
			handleVoucherFileChange(files) {
				this.voucherFiles = files;
			},

			// 处理凭证上传
			handleVoucherUpload() {
				if (!this.voucherFiles.length) {
					uni.showToast({
						title: '请选择文件',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 模拟上传
				this.loading = true;
				setTimeout(() => {
					this.uploadModalShow = false;
					this.loading = false;

					uni.showToast({
						title: '凭证上传成功',
						icon: 'success',
						duration: 2000
					});
				}, 1000);
			},

			// 获取历史记录点样式
			getHistoryDotClass(status) {
				switch (status) {
					case '已申报':
					case '检查通过':
						return 'success';
					case '申报失败':
					case '检查失败':
						return 'danger';
					case '取消申报':
						return 'warning';
					default:
						return 'info';
				}
			},

			// 获取历史记录文本样式
			// 获取历史记录文本样式（修改后）
			getHistoryTextClass(status) {
				switch (status) {
					case '已申报':
					case '检查通过':
						return 'text-success';
					case '申报失败':
					case '检查失败':
						return 'text-danger';
					case '取消申报':
						return 'text-warning';
					default:
						return 'text-info';
				}
			},

			// 处理申报
			handleDeclare() {
				if (this.company.declareState === 0) {
					uni.showToast({
						title: '该公司已申报',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				this.declareRemark = '';
				this.uploadFiles = [];
				this.declareModalShow = true;
			},

			// 处理检查
			handleCheck() {
				this.checkResult = 1;
				this.checkRemark = '';
				this.checkModalShow = true;
			},

			// 处理取消申报
			handleCancel() {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消该公司的申报吗？',
					success: (res) => {
						if (res.confirm) {
							// 模拟取消申报
							this.loading = true;
							setTimeout(() => {
								this.company.declareState = 1; // 未申报
								this.company.declareTime = '';
								this.company.declareRemark = '';
								this.company.declareImages = [];
								this.loading = false;

								// 添加到申报历史
								this.company.declareHistory.unshift({
									time: this.formatDate(new Date()),
									operator: '当前用户',
									status: '取消申报',
									remark: '手动取消申报'
								});

								uni.showToast({
									title: '取消申报成功',
									icon: 'success',
									duration: 2000
								});
							}, 1000);
						}
					}
				});
			},

			// 判断是否可以取消申报
			canCancel() {
				return this.company.declareState === 0 || this.company.declareState === 3;
			},

			// 处理文件变化
			handleFileChange(files) {
				this.uploadFiles = files;
			},

			// 处理申报成功
			handleDeclareSuccess() {
				if (!this.uploadFiles.length) {
					uni.showToast({
						title: '请上传申报图片',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 模拟申报成功
				this.loading = true;
				setTimeout(() => {
					this.company.declareState = 0; // 已申报
					this.company.declareTime = this.formatDate(new Date());
					this.company.declareRemark = this.declareRemark;

					// 提取上传的图片URL
					this.company.declareImages = this.uploadFiles.map(file => file.url);

					this.declareModalShow = false;
					this.loading = false;

					// 添加到申报历史
					this.company.declareHistory.unshift({
						time: this.company.declareTime,
						operator: '当前用户',
						status: '已申报',
						remark: this.declareRemark || '手动申报'
					});

					uni.showToast({
						title: '申报成功',
						icon: 'success',
						duration: 2000
					});
				}, 1000);
			},

			// 处理申报失败
			handleDeclareFail() {
				// 模拟申报失败
				this.loading = true;
				setTimeout(() => {
					this.company.declareState = 3; // 申报失败
					this.declareModalShow = false;
					this.loading = false;

					// 添加到申报历史
					this.company.declareHistory.unshift({
						time: this.formatDate(new Date()),
						operator: '当前用户',
						status: '申报失败',
						remark: this.declareRemark || '手动标记为申报失败'
					});

					uni.showToast({
						title: '已标记为申报失败',
						icon: 'none',
						duration: 2000
					});
				}, 1000);
			},

			// 处理检查结果变更
			handleCheckResultChange(value) {
				this.checkResult = value;
			},

			// 处理检查确认
			handleCheckConfirm() {
				if (this.checkResult === 2 && !this.checkRemark) {
					uni.showToast({
						title: '请输入失败原因',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 模拟检查确认
				this.loading = true;
				setTimeout(() => {
					this.company.checkStatus = this.checkResult;
					this.checkModalShow = false;
					this.loading = false;

					// 添加到申报历史
					this.company.declareHistory.unshift({
						time: this.formatDate(new Date()),
						operator: '当前用户',
						status: this.checkResult === 1 ? '检查通过' : '检查失败',
						remark: this.checkRemark || (this.checkResult === 1 ? '检查通过' : '检查失败')
					});

					uni.showToast({
						title: this.checkResult === 1 ? '检查通过' : '检查失败',
						icon: 'success',
						duration: 2000
					});
				}, 1000);
			},

			// 显示操作菜单
			showActionMenu() {
				this.actionSheetShow = true;
			},

			// 处理操作菜单点击
			handleActionSheetClick(index) {
				this.actionSheetShow = false;

				switch (index) {
					case 0: // 设置
						this.handleSetting();
						break;
					case 1: // 移至公海
						this.handleMoveToPublic();
						break;
					case 2: // 自然人
						this.handleNaturalPerson();
						break;
					case 3: // 套账
						this.handleAccountBook();
						break;
					case 4: // 电局
						this.handleTaxBureau();
						break;
				}
			},

			// 处理设置
			handleSetting() {
				uni.showToast({
					title: '设置功能待实现',
					icon: 'none',
					duration: 2000
				});
			},

			// 处理移至公海
			handleMoveToPublic() {
				uni.showModal({
					title: '确认移至公海',
					content: `确定要将${this.company.companyName}移至公海吗？`,
					success: (res) => {
						if (res.confirm) {
							// 模拟移至公海
							this.loading = true;
							setTimeout(() => {
								this.loading = false;
								uni.showToast({
									title: '已移至公海',
									icon: 'success',
									duration: 2000
								});

								// 返回列表页
								setTimeout(() => {
									this.navigateBack();
								}, 1500);
							}, 1000);
						}
					}
				});
			},

			// 处理自然人
			handleNaturalPerson() {
				uni.showToast({
					title: '跳转至自然人系统',
					icon: 'none',
					duration: 2000
				});

				// 模拟跳转
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/common/webview?url=https://example.com/natural-person'
					});
				}, 1000);
			},

			// 处理套账
			handleAccountBook() {
				uni.showToast({
					title: '跳转至套账系统',
					icon: 'none',
					duration: 2000
				});

				// 模拟跳转
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/common/webview?url=https://example.com/account-book'
					});
				}, 1000);
			},

			// 处理电局
			handleTaxBureau() {
				uni.showToast({
					title: '正在连接电子税务局',
					icon: 'none',
					duration: 2000
				});

				// 模拟跳转
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/common/webview?url=https://example.com/tax-bureau'
					});
				}, 1000);
			},

			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 页面容器 */
	.tax-detail-page {
		background-color: #F5F7FA;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 导航栏 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-button {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: 600;
		color: #4285f4;
		margin-left: 8px;
	}

	.navbar-right {
		display: flex;
		align-items: center;
	}

	.nav-item {
		padding: 4px;
		margin-left: 12px;
	}

	/* 公司信息卡片 */
	.company-info-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 24rpx;
		margin: 120rpx 20rpx 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.company-name {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				align-items: center;

				.company-tags {
					display: flex;
					margin-left: 16rpx;

					.tag {
						display: inline-block;
						padding: 4rpx 12rpx;
						background-color: #f5f5f5;
						border-radius: 16rpx;
						font-size: 20rpx;
						color: #666666;
						margin-right: 8rpx;
					}
				}
			}

			.status-badge {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 24rpx;

				&.success {
					background-color: rgba(82, 196, 26, 0.1);
					color: #52C41A;
				}

				&.info {
					background-color: rgba(24, 144, 255, 0.1);
					color: #1890FF;
				}

				&.warning {
					background-color: rgba(250, 173, 20, 0.1);
					color: #FAAD14;
				}

				&.danger {
					background-color: rgba(255, 77, 79, 0.1);
					color: #FF4D4F;
				}

				&.gray {
					background-color: rgba(153, 153, 153, 0.1);
					color: #999999;
				}

				&.partial {
					background-color: rgba(65, 136, 239, 0.1);
					color: #4188EF;
				}
			}
		}

		.info-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;

			.info-item {
				display: flex;
				flex-direction: column;

				.label {
					font-size: 24rpx;
					color: #999999;
					margin-bottom: 8rpx;
				}

				.value {
					font-size: 26rpx;
					color: #333333;
				}
			}
		}
	}

	/* 报税信息卡片 */
	.tax-info-card,
	.tax-details-card,
	.declare-history-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 24rpx;
		margin: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.card-header {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	/* 报税信息内容 */
	.tax-info-content {
		.info-row {
			display: flex;
			margin-bottom: 20rpx;

			.label {
				font-size: 24rpx;
				color: #999999;
				width: 160rpx;
			}

			.value {
				flex: 1;
				font-size: 26rpx;
				color: #333333;

				&.images {
					display: flex;
					flex-wrap: wrap;

					.image-item {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
						margin-bottom: 16rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.no-image {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}

	/* 税费种详情列表 */
	.tax-details-list {
		.detail-item {
			border-bottom: 2rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.detail-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.detail-info {
					display: flex;
					align-items: center;

					.name {
						font-size: 26rpx;
						color: #333333;
						margin-right: 20rpx;
					}

					.amount {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.detail-status {
					padding: 6rpx 12rpx;
					border-radius: 16rpx;
					font-size: 22rpx;
					margin-right: 20rpx;

					&.success {
						background-color: rgba(82, 196, 26, 0.1);
						color: #52C41A;
					}

					&.info {
						background-color: rgba(24, 144, 255, 0.1);
						color: #1890FF;
					}

					&.warning {
						background-color: rgba(250, 173, 20, 0.1);
						color: #FAAD14;
					}

					&.danger {
						background-color: rgba(255, 77, 79, 0.1);
						color: #FF4D4F;
					}

					&.gray {
						background-color: rgba(153, 153, 153, 0.1);
						color: #999999;
					}

					&.partial {
						background-color: rgba(65, 136, 239, 0.1);
						color: #4188EF;
					}
				}

				.expand-icon {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					i {
						font-size: 24rpx;
						color: #999999;
						transition: transform 0.3s;
					}

					&.expanded i {
						transform: rotate(180deg);
					}
				}
			}

			.detail-content {
				padding: 0 0 20rpx 0;
				background-color: #f9f9f9;
				border-radius: 8rpx;
				padding: 20rpx;

				.content-row {
					display: flex;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						font-size: 24rpx;
						color: #999999;
						width: 160rpx;
					}

					.value {
						flex: 1;
						font-size: 24rpx;
						color: #333333;
						display: flex;

						.action-btn {
							display: flex;
							align-items: center;
							margin-right: 24rpx;

							i {
								font-size: 24rpx;
								color: #4188EF;
								margin-right: 8rpx;
							}

							text {
								color: #4188EF;
							}
						}
					}
				}
			}
		}
	}

	/* 申报历史时间轴 */
	.history-timeline {
		position: relative;
		padding-left: 40rpx;

		&::before {
			content: '';
			position: absolute;
			left: 16rpx;
			top: 0;
			bottom: 0;
			width: 2rpx;
			background-color: #eeeeee;
		}

		.timeline-item {
			position: relative;
			margin-bottom: 40rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.timeline-dot {
				position: absolute;
				left: -40rpx;
				top: 0;
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				background-color: #4188EF;

				&.success {
					background-color: #52C41A;
				}

				&.danger {
					background-color: #FF4D4F;
				}

				&.warning {
					background-color: #FAAD14;
				}

				&.info {
					background-color: #4188EF;
				}
			}

			.timeline-line {
				position: absolute;
				left: -40rpx;
				top: 34rpx;
				bottom: -40rpx;
				width: 2rpx;
				background-color: #eeeeee;
			}

			.timeline-content {
				background-color: #f9f9f9;
				border-radius: 16rpx;
				padding: 20rpx;

				.content-header {
					display: flex;
					justify-content: space-between;
					margin-bottom: 16rpx;

					.time {
						font-size: 24rpx;
						color: #999999;
					}

					.status {
						font-size: 24rpx;
						font-weight: 500;

						&.text-success {
							color: #52C41A;
						}

						&.text-danger {
							color: #FF4D4F;
						}

						&.text-warning {
							color: #FAAD14;
						}

						&.text-info {
							color: #4188EF;
						}
					}
				}

				.content-body {
					.info-row {
						display: flex;
						margin-bottom: 12rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.label {
							font-size: 24rpx;
							color: #999999;
							width: 120rpx;
						}

						.value {
							flex: 1;
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}

	/* 底部操作栏 */
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.btn {
			flex: 1;
			height: 72rpx;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			margin: 0 10rpx;

			&.action-btn {
				background-color: #4188EF;
				color: white;
			}
		}
	}

	/* 申报弹窗 */
	.declare-form,
	.check-form,
	.upload-form {
		.form-group {
			margin-bottom: 30rpx;

			.form-label {
				display: block;
				font-size: 26rpx;
				color: #333333;
				margin-bottom: 16rpx;
			}

			.form-value {
				font-size: 26rpx;
				color: #333333;
			}
		}

		.remark-input {
			width: 100%;
			height: 150rpx;
			border: 2rpx solid #eeeeee;
			border-radius: 16rpx;
			padding: 20rpx;
			font-size: 26rpx;
			color: #333333;
			resize: none;
		}

		.u-radio-group {
			display: flex;
			flex-wrap: wrap;

			.u-radio {
				margin-right: 30rpx;
				margin-bottom: 16rpx;
			}
		}
	}

	/* 弹窗底部按钮 */
	.modal-footer {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;

		.btn {
			padding: 0 30rpx;
			height: 72rpx;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			flex: 1;
			margin: 0 10rpx;

			&.cancel-btn {
				background-color: #f5f5f5;
				color: #666666;
			}

			&.fail-btn {
				background-color: #FF4D4F;
				color: white;
			}

			&.success-btn {
				background-color: #4188EF;
				color: white;
			}

			&.confirm-btn {
				background-color: #4188EF;
				color: white;
			}

			&.reset-btn {
				background-color: #f5f5f5;
				color: #666666;
			}
		}
	}
</style>